// 1.1 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 1.2 配置选项
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview"
};

// 1.3 创建裁剪区域
$image.cropper(options);
// =============================  点击上传, 可以选择图片  =============================
$('#btnChooseImage').click(function () {
    $('#file').click();
});
$('#file').change(function () {
    // 获取到用户选择的文件
    const file = this.files[0]
    console.log(file);
    if (!file) {
        return layer.msg('请选择文件')
    }
    const newSrc = URL.createObjectURL(file)
    console.log(newSrc);



    $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newSrc)  // 重新设置图片路径
        .cropper({
            // 纵横比
            aspectRatio: 1,
            // 指定预览区域
            preview: ".preview"
        })        // 重新初始化裁剪区域

});


// ---------------  点击 确定 的时候，剪裁图片，转成base64格式，提交字符串到接口 ----------
$('#btnCreateAvatar').click(function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    });

    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    console.log(dataURL);

    axios
        .post('/my/update/avatar', `avatar=${encodeURIComponent(dataURL)}`)
        .then(res => {
            console.log(res)
            if (res.data.status !== 0) {
                return layer.msg('更新头像失败')
            }
            layer.msg('更新头像成功')
            window.parent.getUserInfo();
        })





    // axios
    //     .post("/my/update/avatar", `avatar=${encodeURIComponent(dataURL)} `)
    //     .then((res) => {
    //         // 提示
    //         if (res.data.status !== 0) {
    //             // 失败
    //             return layer.msg("更新头像失败");
    //         }

    //         layer.msg("更新头像成功");
    //         // 页面中的头像发生变化（更新）
    //         window.parent.getUserInfo();
    //     });
});